<template>
	<view class="index" v-if="loadStatus">

		<view class="header  bg-theme text-sm flex justify-center">
			<view class="box flex  justify-center align-center text-center">
				<block v-for="(item, index) in tabbar" :key="index">
					<view class="item" :class="tabbarIndex == index ? 'bg-black text-white': ''"
						@tap="tabSelect(index)">
						{{item.name}}
					</view>
				</block>
			</view>
			<view class="text-center search-text text-df search" @tap="showSearch = true"><u-icon name="search" size="28" color="#000"></u-icon></view>
		</view>


		<view :class="tabbarIndex == 1 ? 'hidden' : ''" class="charts">
			<view class="header flex align-center bg-theme padding justify-center text-df solid-top">
				<view class="flex-sub flex align-center justify-center">支出 <text class="text-red">{{numberFormatter(outAmount)}}</text>
				</view>
				<view class="flex-sub flex align-center justify-center">收入 <text class="text-green">{{numberFormatter(inAmount)}}</text>
				</view>
			</view>

			<view class="qiun-columns">
				<view class="qiun-bg-white qiun-title-bar qiun-common-mt">
					<view class="qiun-title-dot-light">收入</view>
				</view>
				<view class="qiun-charts">
					<qiun-data-charts type="pie" :canvas2d='true' canvasId='canvansIn' :opts="opts" :chartData="inChartData" v-show="inAmount > 0" />
					<u-empty v-if="inAmount == 0"></u-empty>
				</view>
			</view>

			<view class="qiun-columns">
				<view class="qiun-bg-white qiun-title-bar qiun-common-mt">
					<view class="qiun-title-dot-light">支出</view>
				</view>
				<view class="qiun-charts">
					<qiun-data-charts type="pie" :canvas2d='true' canvasId='canvansOut' :opts="opts" :chartData="outChartData" v-show="outAmount > 0" />
					<u-empty v-if="outAmount == 0"></u-empty>
				</view>
			</view>
		</view>
		<!-- 搜索开始 -->
		<!-- 搜索结束 -->

		<!-- 记录开始 -->
		<view class="list" :class="tabbarIndex == 0 ? 'hidden' : ''">
			<view class="container">
				<view class="items">
					<block v-for="(item, index) in funds" :key="index">
						<navigator :url="'/pages/index/detail?id='+item.id" class="item">
							<view class="icon">
								<image :src="item.icon_image" mode=""></image>
							</view>
							<view class="info">

								<view class="type-name text-df">{{item.type_name}} <text v-if="item.remark">-
										{{item.remark}}</text></view>
								<view class="account-name"><text
										v-if="item.user_remark">【{{item.user_remark}}】</text>{{item.account_name}}
								</view>
							</view>
							<view class="amount text-bold"
								:class="item.operation_type == 1 ? 'text-red' : 'text-green'">
								{{item.operation_type == 1 ? '-' : '+'}}{{numberFormatter(item.amount)}}
							</view>
						</navigator>
					</block>
				</view>
			</view>
		</view>


		<!-- 搜索开始 -->
		<u-popup :show="showSearch" @close="showSearch = false" mode="right">
			<Search @search="search" @init="init" orderType="amount" />
		</u-popup>
		<!-- 搜索结束 -->


	</view>
</template>

<script>
	var that;
	var outPie = null;
	var inPie = null;
	var _self;
	import {
		mapState
	} from 'vuex';

	// import uCharts from '@/js_sdk/u-charts/u-charts/u-charts.js';

	import statisticsModel from '@/models/StatisticsModel.js'
	import Search from '@/components/search.vue'

	export default {
		components: {
			Search
		},
		computed: {
			...mapState(['token', 'userInfo', 'users', 'accounts', 'fundTypes']),
		},
		data() {
			return {
				loadStatus: false,
				tabbarIndex: 0,
				tabbar: [{
						name: '统计报表'
					},
					{
						name: '收支排行'
					}
				],
				funds: [],
				page: 1,
				pageStatus: 0,
				inAmount: 0,
				outAmount: 0,
				inChartData: {},
				outChartData: {},
				opts: {
					padding: [5, 5, 5, 5],
					enableScroll: false
				},
				form: {},
				showSearch: false,
			}

		},
		async onLoad() {
			that = this;
			_self = this;
			uni.showLoading();
			await this.getServerData()
			that.loadStatus = true;
			uni.hideLoading();

		},
		onReachBottom() {

			this.get_list();
		},
		methods: {
			tabSelect(index) {
				that.tabbarIndex = index;
				if (this.funds.length == 0) {
					that.get_list();
				}
			},
			async getServerData() {
				const res = await statisticsModel.index(this.form)
				that.outAmount = res.data.outAmount;
				that.inAmount = res.data.inAmount;
				let inPieData = {
					series: [{
						data: []
					}]
				};
				res.data.inCount.forEach(item => {
					inPieData.series[0].data.push({
						name: item.type_name,
						value: item.amount
					})

				})
				this.inChartData = inPieData;

				let outPieData = {
					series: []
				};
				res.data.outCount.forEach(item => {
					outPieData.series.push({
						name: item.type_name,
						data: item.amount
					})

				})
				this.outChartData = outPieData;

			},
			async init(form) {
				this.form = form
				this.page = 1
				that.showSearch = false;
				that.funds = [];
				await that.getServerData();
				this.get_list()
			},

			search(form) {
				this.form = form
				this.page = 1
				that.showSearch = false;
				that.funds = [];
				that.getServerData();
				this.get_list()
			},
			//获取列表
			async get_list() {
				if(this.pageStatus != 0) {
					return 
				}
				this.form.page = this.page
				const res = await statisticsModel.funds(this.form)
				that.page++;
				if (res.data.length > 0) {
					that.funds = that.funds.concat(res.data);
					that.pageStatus = 0;
				} else {
					that.pageStatus = 2;
				}
			}
		}
	}
</script>

<style scoped lang="less">
	.qiun-columns {
		padding: 20rpx;
	}

	.header {
		height: 80upx;
		position: relative;
		
		.search{
			height: 80rpx;
			width: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			position: absolute;
			right: 20rpx;
		}

		.box {
			width: 500upx;
			overflow: hidden;
			box-sizing: border-box;

			.item {
				flex: 1;
				height: 60upx;
				display: flex;
				box-sizing: border-box;
				align-items: center;
				justify-content: center;
				border: 1rpx solid #000;
				border-radius: 0 10rpx 10rpx 0;

				&:nth-child(1) {
					border-radius: 10rpx 0 0 10rpx;
				}
			}
		}
	}



	.hidden {
		display: none;
	}

	.list {
		padding: 20upx 0 20upx 40upx;
		box-sizing: border-box;
		width: 750upx;
	}

	.list .container {
		border-left: 1upx solid #EDEDED;
	}

	.list .date-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;
		height: 80upx;
		border-bottom: 1upx solid #EDEDED;
		padding: 30upx;
		box-sizing: border-box;
		font-size: 24upx;
	}

	.list .date-box .tag {
		width: 40upx;
		height: 40upx;
		border: 6upx solid #FFD801;
		border-radius: 50%;
		position: absolute;
		left: -20upx;
		box-sizing: border-box;
		background: #fff;
	}

	.list .date-box .count {
		display: flex;

	}

	.list .icon image {
		width: 60upx;
		height: 60upx;

	}

	.list .item {
		display: flex;
		align-items: center;
		border-bottom: 1upx dashed #EDEDED;
		padding: 20upx;
		flex: 1;
	}

	.list .icon {
		margin-right: 20upx;
		border-radius: 50%;
		padding: 10upx;
	}

	.list .info {
		flex: 1;
	}

	.list .account-name {
		color: #ccc;
		font-size: 24upx;
		flex: 1;
	}

	.list .item .amount {
		width: 200upx;
		text-align: right;
		font-size: 32upx;
	}

	.nav {
		border-top: 1rpx solid rgba(255, 255, 255, 0.3);
		border-bottom: 1rpx solid rgba(255, 255, 255, 0.3);

		.cu-item {
			padding: 20rpx;

			&.text-red {
				border-bottom: 4rpx solid red;
			}
		}


	}
</style>